import ReactDom from "react-dom";

/*
  学习目标：useRef的使用
  ref作用：3. 保存数据 1. 获取DOM  2 获取组件实例对象
  🔔useRef的作用和React.createRef完全相同：创建ref
*/

import React, { useEffect, useState, useRef } from "react";

export default function App() {
  const [isShow, setIsShow] = useState(true);
  return (
    <div>
      {isShow && <Child></Child>}
      <button onClick={() => setIsShow(!isShow)}>点击卸载子组件</button>
    </div>
  );
}

function Child() {
  // 1。 创建ref
  const timerRef = useRef();
  console.log("timerRef  ----->  ", timerRef);

  //   需求1: 挂载时，开启定时器
  useEffect(() => {
    // 2. 使用ref保存数据
    timerRef.current = setInterval(() => {
      console.log("定时器开启了  ----->  ", 123);
    }, 100);
  }, []);

  // 需求2: 卸载时，卸载定时器
  useEffect(() => {
    return () => {
      // 3. 卸载
      clearInterval(timerRef.current);
      console.log("timerRef  ----->  ", timerRef);
    };
  }, []);
  return <div>我是子组件</div>;
}

ReactDom.render(<App />, document.querySelector("#root"));
